<template>
  <div class="spatial" v-if="this.$store.state.showTable">
    <div class="table-title">
      <div>空间查询数据</div>
      <div class="icon-close" @click="closeTable"><i class="el-icon-close"></i></div>
    </div>
    <div class="table-content">
      <el-table
          border
          :data="this.$store.state.tableData"
          style="width: 100%"
          height="200"
          stripe
          highlight-current-row
          size="small"
          :header-cell-style="{color:'#333333',height: '20px'}">
        <el-table-column
            type="index"
            label="序号"
            width="50"
            header-align="center"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="站名"
            width="120"
            header-align="center"
            align="center"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="economize"
            label="省"
            width="200"
            header-align="center"
            align="left"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="market"
            label="市"
            width="200"
            header-align="center"
            align="left"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="lng"
            label="经度"
            width="100"
            header-align="center"
            align="center">
        </el-table-column>
        <el-table-column
            prop="lat"
            label="纬度"
            width="100"
            header-align="center"
            align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "spatialQuery",
  methods:{
    closeTable() {
      this.$store.commit('modifyShowTable',false)
    }
  }
}
</script>

<style scoped>
.table-title {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 15px;
}
.icon-close {
  color: #3C467C;
}
.spatial {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.table-content {
  padding: 10px;
  background: #ffffff;
}
</style>